<template>
    <view class="message-item">
        <view class="list-item" v-for="(itm, idx) in item.message_send" :key="idx">
            <view class="message-send">
                <view class="box message-send--user-info">
                    <u--image src="/static/images/icon-user-default.png" shape="circle" :width="64"
                        :height="64"></u--image>
                    <text class="-name">{{ item.name || '匿名用户' }}</text>
                </view>
                <view class="message-send--info">
                    <view class="box content">
                        <text>{{ itm.content }}</text>
                    </view>
                    <view class="box images" v-if="itm.images && itm.images.length">
                        <u-album :urls="itm.images.split(',')"></u-album>
                    </view>
                    <view class="box create-time">
                        <text>{{ itm.create_time }}</text>
                    </view>
                </view>
            </view>
            <view class="message-reply" v-if="itm.is_reply == 1">
                <view class="box message-reply--title">
                    <text>官方回复：</text>
                </view>
                <view class="message-reply--info">
                    <view class="box content">
                        <text>{{ itm.message_reply.content }}</text>
                    </view>
                    <view class="box create-time">
                        <text>{{ itm.message_reply.create_time }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="message-btn" v-if="index == total - 1 && item.is_reply == 1 && item.notice_id > 0">
            <u-text color="#2DCC75" text="再次留言" size="28" bold block @click="handleToMessageSend"></u-text>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                default: () => ({
                    message_send: [],
                })
            },
            index: {
                type: Number,
                default: 0,
            },
            total: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
            }
        },
        onLoad() {

        },
        methods: {
            handleToMessageSend() {
                this.$emit('message-send')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .message-item {
        .list-item {
            padding: 0 30rpx;
            margin-bottom: 40rpx;
            background-color: #ffffff;

            .message-send {
                &--user-info {
                    display: flex;
                    align-items: center;

                    .-name {
                        display: inline-block;
                        padding-left: 28rpx;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #999999;
                        line-height: 36rpx;
                    }
                }

                &--info {
                    padding-left: calc(64rpx + 28rpx);

                    .content {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 36rpx;
                    }

                    // .images {}

                    .create-time {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #999999;
                        line-height: 36rpx;
                    }
                }
            }

            .message-reply {
                margin-left: calc(64rpx + 28rpx);
                padding: 24rpx;
                background: #F2F2F2;
                border-radius: 10rpx;

                &--title {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #666666;
                    line-height: 36rpx;
                }

                &--info {
                    .content {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                    }

                    .create-time {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #999999;
                        line-height: 36rpx;
                    }
                }
            }
        }

        .message-btn {
            margin-left: 64rpx;
        }
    }
</style>